<template>
        <div>
            <span style="font-size: larger;">{{ a }}-----------{{ child.b }}--------年龄是：{{ age }}</span>
            <div>
                <span style="font-size: large;" ref="title">111111111111</span>
                <el-button @click="showtitle">点击展示title>>{{ t }}</el-button>
            </div>
            <div class="">
                <el-button @click="getDogs">添加小狗</el-button>
                <el-image v-for="(dog,index) in dogs" fit="cover" :src="dog" :key="index" class="sizee"></el-image>
            </div>
            <div>
                <el-button @click="turn">跳转login</el-button>
            </div>
        </div>
</template>

<script setup>
    import {defineProps,ref,onMounted,onBeforeMount,reactive} from 'vue'
    import Axios from 'axios';
    import get_dogs from '@/hooks/getDogs'
import router from '@/router';
    const t=ref('t')
    let title = ref('tt')
  let child = defineProps(['a','b','age']) //传过来的参数相当于变量，可以直接用，也可以用一个对象接收，可以对象.prop
  const showtitle = ()=>{
        t.value = title.value.innerText //组件的ref属性，放一个变量。之后可以用这个变量来调用标签或者组件
  }
const {dogs,getDogs} = get_dogs()
  onBeforeMount(()=>{                           //祖孙之间传递信息，祖用provide，孙用inject接收
    console.dir('挂载前')
    debugger
    console.dir('挂载')
  })
  const turn = ()=>{
    router.push({name:'Login',query:{id:112}})
  }
</script>
<style scoped>

</style>